<template>
    <ul class="list-group mb-3 resource-list">
        <li @click="seleItem(item)" v-for="item in resources" :key="item.id"
            :class="`${resourceActive(item)} list-group-item resource-list-item  flex-column d-flex justify-content-between lh-condensed`">
            <div class="">
                <h6 class="my-0">{{item.title}}</h6>
                <small class="text-muted ">{{item.body}}</small>
            </div>
            <span style="width:50px" class="label mt-1 label-success">blog</span>
        </li>

    </ul>
</template>
<script>
    import {computed} from 'vue';
    export default {
        props: {
            resources: {
                type: Array,
                default: () => []
            },
            activeId:{
                type:Number
            }
        },
        setup(props, context) {
            const seleItem = (resource) => {
                context.emit('onHandleItem', resource)
            }
            const resourceActive=computed(() => {
                return (resource)=>resource.id===props.activeId?'is-active':''
            })
            return { seleItem,resourceActive }
        }
    };
</script>
<style lang="scss" scoped>
    .resource-list {
        height: 350px;
        overflow-y: auto;

        &-item {
            cursor: pointer;

            &:hover {
                background-color: #f3f3f3;
            }
        }
        .is-active{
            background-color: #f3f3f3; 
        }


    }
</style>